<template>
	<div>
		<template v-if="props.methods === 'pay'">
			<div class="mt-20px">
				<div class="flex items-center text-#86909C text-14px">
					<p class="w-200px">币种</p>
					<p class="ml-20px">用{{ selected.name }}</p>
				</div>
				<div class="flex items-center mt-10px">
					<div>
						<el-select v-model="selected.coin" placeholder="选择" size="large" style="width: 200px"
							suffix-icon="CaretBottom">
							<el-option v-for="item in listCoin" :key="item.coin" :label="item.coin" :value="item.coin"
								@click="changeSelectCoin(item.coin)" />
						</el-select>
					</div>
					<div class="ml-20px">
						<p>{{ selected.coin }}</p>
					</div>
				</div>
			</div>
			<p class="text-#000000 font-bold text-18px mt-20px">
				设置价格
			</p>
			<div
				class="mt-10px bg-#F5F5F5 w-255px h-40px flex items-center justify-center rounded-8px text-14px text-#000000">
				固定价格
			</div>
			<p class="text-#86909C text-14px mt-10px">固定价格</p>
			<div class="mt-10px">
				<el-input placeholder="请输入固定价格" style="height: 58px;"></el-input>
			</div>
			<div class="text-14px mt-10px">
				<span class="text-#86909C">市场参考价</span>
				<span class="text-#000000">￥20.00</span>
			</div>
		</template>
		<template v-if="props.methods === 'sell'">
			<div class="mt-20px">
				<div class="flex items-center text-#86909C text-14px">
					<p class="w-200px">币种</p>
					<p class="ml-20px">用{{ selected.name }}</p>
				</div>
				<div class="flex items-center mt-10px">
					<div>
						<el-select v-model="selected.coin" placeholder="选择" size="large" style="width: 200px"
							suffix-icon="CaretBottom">
							<el-option v-for="item in listCoin" :key="item.coin" :label="item.coin" :value="item.coin"
								@click="changeSelectCoin(item.coin)" />
						</el-select>
					</div>
					<div class="ml-20px">
						<p>{{ selected.coin }}</p>
					</div>
				</div>
			</div>
			<p class="text-#000000 font-bold text-18px mt-20px">
				设置价格
			</p>
			<div
				class="mt-10px bg-#F5F5F5 w-255px h-40px flex items-center justify-center rounded-8px text-14px text-#000000">
				固定价格
			</div>
			<p class="text-#86909C text-14px mt-10px">固定价格</p>
			<div class="mt-10px">
				<el-input placeholder="请输入固定价格" style="height: 58px;"></el-input>
			</div>
			<div class="text-14px mt-10px">
				<span class="text-#86909C">市场参考价</span>
				<span class="text-#000000">￥20.00</span>
			</div>
		</template>
		<div class="mt-60px">
			<el-button type="primary" color="#114CEE" style="width:100%;height:50px;font-size: 18px;" @click="nextClick">
				下一步
			</el-button>
		</div>
	</div>
</template>
<script lang="ts" setup>
import {ref} from 'vue';

interface IProps {
	methods: 'pay' | 'sell';
}

const props = defineProps<IProps>();

const emits = defineEmits(['next']);

const selected = ref<any>({
	coin: "CMY",
	name: "法币"
});


const listCoin = ref<any[]>([
	{
		coin: "CMY",
		name: "法币"
	},
	{
		coin: "ETH",
		name: "ETH币"
	},
	{
		coin: "BTC",
		name: "比特币"
	}
]);


const changeSelectCoin = (coin: any) => {
	listCoin.value.forEach((item: any) => {
		if (item.coin === coin) {
			selected.value.name = item.name;
			selected.value.coin = item.coin;
		}
	})
}


const nextClick = () => {
	console.log(selected.value);
	emits('next', true);
}
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
	font-size: 18px;
}
</style>
